<template>
  <div>
    <!-- 
      v-model指令 双向数据绑定 绑在表单元素
      v-model="值"
     -->
    <input type="text" v-model="msg" />
    <hr />
    {{ msg }}

    <label> 用户名： <input type="text" v-model="form.username" /> </label>
    <label> 密码： <input type="password" v-model="form.password" /> </label>
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    handleLogin() {
      console.log(this.form.username, this.form.password);
    },
  },
};
</script>

<style>
</style>